<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./public/css/css.css"/>
    <style>
        .upload-btn{
            padding:5px 10px;
            background-color: #409eff;
            color:#fff;
            font-size: 20px;
        }
    </style>
</head>
<body>


<header id="header">
    <a href="/" id="logo"></a>

    {% include "nav.html" %}

    <div id="user">
        <a href="/login">登录</a>
        <a href="/register">注册</a>
    </div>
</header>

<div id="main">

    <div id="login" class="panel">
        <h2>文件上传</h2>
        <form action="" method="post" enctype="multipart/form-data">
            <div class="form-item">
                <label>
                    <span class="txt">选择文件：</span>
                    <div class="form-button primary" id="uploaderBtn">
                        请选择一张封面图片进行上传
                    </div>
                </label>
                <input multiple type="file" name="cover" id="cover" style="display: none;" />
            </div>
            <div class="form-item">
                <label>
                    <span class="txt"></span>
                    <button class="form-button primary">上传</button>
                </label>
            </div>
        </form>
    </div>

</div>
<script>
  let uploaderBtn = document.querySelector('#uploaderBtn');
  let coverElement = document.querySelector('#cover');

  uploaderBtn.onclick = function() {
    coverElement.click();
  }

  coverElement.onchange = function() {
    // value 存储的是字符串，是这个文件的文件名（包含路径的）
    // value 不是文件本身的二进制数据，而是文件名称
    // console.log(this.value);
    // uploaderBtn.innerHTML = this.value;

    // files 存储才是具体的文件二进制数据对象
    // console.log(this.files);
    uploaderBtn.innerHTML = this.files[0].name;
  }
</script>
</body>
</html>